<template>
  <div class="item">
    <div class="container" @click="handleDetail(item._id)">
      <div>
        <img :src="item.pic" alt="" />
      </div>
      <div>
        <p style="color: #333; font-weight: 600">{{ item.title }}</p>
        <p>
          观众评分：<span style="color: #ff6700">{{ item.raiting }}</span> 分
        </p>
        <p>简评：{{ item.slogo }}</p>
        <p>{{ item.labels.join(" | ") }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    handleDetail(val) {
      //   console.log(val);
      var id = val;
      this.$router.push(`/movie/${id}`);
    },
  },
};
</script>

<style scoped>
.item:last-child {
  padding-bottom: 2rem;
}
.container {
  cursor: pointer;
  padding: 20px;
  height: 158px;
  display: flex;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}
img {
  height: 2.3rem;
  width: 1.7rem;
}
p {
  text-align: left;
  color: #b2b2b2;
  font-size: 0.4rem;
  margin-bottom: 0.1rem;
  margin-left: 0.2rem;
}
</style>